<template>
	<view>
		<view>
			<view class="dhl" style="background-color: #E23C63;"></view>
			<view class="topbar box dis_f_c_c" style="background-color: #E23C63;color: #FFF;">
					悬赏管理
			<image  class="top_jt" src="../../static/icon/back2.png" mode="aspectFit" @click="go_back"></image>
			</view>
		</view>
		<view class="r_btn dis_f_l_c">
			<image src="../../static/xuan_shang/xfj.png" mode=""></image>
			<view @click="go_fb">发布悬赏</view>
		</view>
		<view class="content">
			<view style="margin-bottom: 24rpx;">
				<u-tabs :list="list" bg-color="none" active-color="#222222"  bar-height="4" inactive-color="#BBBBBB" :is-scroll="false" :current="current" @change="change"></u-tabs>
			</view>
			<view class="list" v-if="current == 0">
				<view class="list_box dis_f_co" v-for="(item,index) in lists" @click="info(item.id)">
					<view class="dis_f_sb_c" style="width: 100%;margin-bottom: 12rpx;">
						<view>{{item.title}}</view>
						<view style="color: #E23C63;" class="dis_f_l_c">
							<view style="margin-right: 12rpx;">{{item.statustext}}</view>
							<view>剩余:{{item.task_num_surplus}}</view>
						</view>
					</view>
					<view style="margin-bottom: 28rpx;">{{item.requirement}}</view>
					<view style="width: 100%;" class="dis_f_sb_c">
						<view style="color: #BBB;font-size: 22rpx;">人数:{{item.need_num}}  单价:{{item.task_money}}  数量:{{item.task_num}}</view>
						
						<view class="dis_f_l_c" v-if="item.status == 1">
							<view class="dis_f_c_c btn1" @click.stop="go_top(item.id)">置顶</view>
							<view class="dis_f_c_c btn2" @click.stop="pay_type_show(item.id)">刷新</view>
							
						</view>
					</view>
				</view>
				<view v-if="lists ==''"><u-empty style="padding-top: 80rpx;" text="该分类暂无数据" mode="list"></u-empty></view>
				<view style="padding-bottom: 120rpx;">
					<u-loadmore :status="status" v-if="lists != ''"/>
				</view>
			</view>
			<view class="list" v-if="current == 1">
				<view class="list_box dis_f_co" v-for="(item,index) in lists" @click="info(item.id)">
					<view class="dis_f_sb_c" style="width: 100%;margin-bottom: 12rpx;">
						<view>{{item.title}}</view>
						<view style="color: #E23C63;" class="dis_f_l_c">
							<view style="margin-right: 12rpx;">{{item.statustext}}</view>
							<view>剩余:{{item.task_num_surplus}}</view>
						</view>
					</view>
					<view style="margin-bottom: 28rpx;">{{item.requirement}}</view>
					<view style="width: 100%;" class="dis_f_sb_c">
						<view style="color: #BBB;font-size: 22rpx;">人数:{{item.need_num}}  单价:{{item.task_money}}  数量:{{item.task_num}}</view>
						
						<view class="dis_f_l_c" v-if="item.status == 1">
							<view class="dis_f_c_c btn1" @click.stop="go_top(item.id)">置顶</view>
							<view class="dis_f_c_c btn2" @click.stop="pay_type_show(item.id)">刷新</view>
						</view>
						
					</view>
					<view style="font-size: 22rpx;" v-if="item.reason">后台下架/审核未通过原因：{{item.reason}}</view>
				</view>
				<view v-if="lists ==''"><u-empty style="padding-top: 80rpx;" text="该分类暂无数据" mode="list"></u-empty></view>
				<view style="padding-bottom: 120rpx;">
					<u-loadmore :status="status" v-if="lists != ''"/>
				</view>
			</view>
			<view class="list" v-if="current == 2">
				<view class="list_box dis_f_co" v-for="(item,index) in jdlists" @click="jdinfo(item.id)">
					<view class="dis_f_sb_c" style="width: 100%;margin-bottom: 12rpx;">
						<view>{{item.title}}</view>
						<view style="color: #BBB;">{{item.addtime}}</view>
					</view>
					<view style="margin-bottom: 28rpx;padding-bottom:24rpx;border-bottom: 2rpx solid #EEE;">{{item.requirement}}</view>
					<view class="dis_f_sb_c" style="width: 100%;font-size: 22rpx;color: #BBB;margin-bottom: 12rpx;">
						<view>用户:{{item.user_name}}</view>
						<view>完成时间:{{item.task_examine_time}}</view>
					</view>
					<view style="width: 100%;font-size: 22rpx;color: #BBB;margin-bottom: 36rpx;">文字验证:{{item.verify_text}}</view>
					<view class="dis_f_l_c" style="font-size: 22rpx;color: #5EBCA3;">
						<!-- <view class="g_btn dis_f_c_c">查看完成进度</view> -->
						<view>审核结果:已通过,佣金发放</view>
					</view>
				</view>
				<view v-if="jdlists ==''"><u-empty style="padding-top: 80rpx;" text="该分类暂无数据" mode="list"></u-empty></view>
				<view style="padding-bottom: 120rpx;">
					<u-loadmore :status="status" v-if="jdlists != ''"/>
				</view>
			</view>
			<view class="list" v-if="current == 3">
				<view class="list_box dis_f_co" v-for="(item,index) in jdlists" @click="jdinfo(item.id)">
					<view class="dis_f_sb_c" style="width: 100%;margin-bottom: 12rpx;">
						<view>{{item.title}}</view>
						<view style="color: #BBB;">{{item.addtime}}</view>
					</view>
					<view style="margin-bottom: 28rpx;padding-bottom:24rpx;border-bottom: 2rpx solid #EEE;">{{item.requirement}}</view>
					<view class="dis_f_sb_c" style="width: 100%;font-size: 22rpx;color: #BBB;margin-bottom: 12rpx;">
						<view>用户:{{item.user_name}}</view>
						<view>审核时间:{{item.task_examine_time}}</view>
					</view>
					<view style="width: 100%;font-size: 22rpx;color: #BBB;margin-bottom: 36rpx;">文字验证:{{item.verify_text}}</view>
					<view class="dis_f_sb_c" style="font-size: 22rpx;color: #E23C63;">
						<!-- <view class="g_btn dis_f_c_c">查看完成进度</view> -->
						<view>审核结果:{{item.task_examine_no}}</view>
						<view>{{item.statustext}}</view>
					</view>
				</view>
				<view v-if="jdlists ==''"><u-empty style="padding-top: 80rpx;" text="该分类暂无数据" mode="list"></u-empty></view>
				<view style="padding-bottom: 120rpx;">
					<u-loadmore :status="status" v-if="jdlists != ''"/>
				</view>
			</view>
			<view class="list" v-if="current == 4">
				<view class="list_box dis_f_co" v-for="(item,index) in jdlists" @click="jdinfo(item.id)">
					<view class="dis_f_sb_c" style="width: 100%;margin-bottom: 12rpx;">
						<view>{{item.title}}</view>
						<view style="color: #BBB;">{{item.addtime}}</view>
					</view>
					<view style="margin-bottom: 28rpx;padding-bottom:24rpx;border-bottom: 2rpx solid #EEE;">{{item.requirement}}</view>
					<view class="dis_f_sb_c" style="width: 100%;font-size: 22rpx;color: #BBB;margin-bottom: 12rpx;">
						<view>用户:{{item.user_name}}</view>
						<view>提交时间:{{item.user_submit_time}}</view>
					</view>
					<!-- <view style="width: 100%;font-size: 22rpx;color: #BBB;margin-bottom: 36rpx;">文字验证:{{item.verify_text}}</view> -->
					<view class="dis_f_l_c" style="font-size: 22rpx;color: #E23C63;">
						<!-- <view class="g_btn dis_f_c_c">查看完成进度</view> -->
						<view>待审核</view>
						
					</view>
				</view>
				<view v-if="jdlists ==''"><u-empty style="padding-top: 80rpx;" text="该分类暂无数据" mode="list"></u-empty></view>
				<view style="padding-bottom: 120rpx;">
					<u-loadmore :status="status" v-if="jdlists != ''"/>
				</view>
			</view>
		
			<u-keyboard
				default=""
				ref="uKeyboard" 
				mode="number" 
				:mask="true" 
				:mask-close-able="false"
				:dot-enabled="false" 
				v-model="show"
				:safe-area-inset-bottom="true"
				:tooltip="false"
				@change="onChange"
				@backspace="onBackspace">
				<view>
					<view class="u-text-center u-padding-20 money">
						<text>{{price}}</text>
						<text class="u-font-20 u-padding-left-10">{{type_money}}</text>
						<view class="u-padding-10 close" data-flag="false" @tap="showPop(false)">
							<u-icon name="close" color="#333333" size="28"></u-icon>
						</view>
					</view>
					<view class="u-flex u-row-center">
						<u-message-input 
							mode="box" 
							:maxlength="6"
							:dot-fill="true"
							v-model="password"
							:disabled-keyboard="true"
							@finish="finish"
						></u-message-input>
					</view>
					<view class="u-text-center u-padding-top-10 u-padding-bottom-20 tips">支付键盘</view>
				</view>
			</u-keyboard>
			
			<u-popup v-model="type_show" mode="center" width="400" height="300" border-radius="20">
				<view class="dis_f_co_l_c tc_pay">
					<view class="dis_f_l_c" @click="pay_type_show_2(1)" style="margin-left: 100rpx;">
						<image src="../../static/mine/lingqian.png" mode=""></image>
						<view>零钱</view>	
					</view>
					<view class="dis_f_l_c" @click="pay_type_show_2(2)" style="margin-left: 100rpx;">
						<image src="../../static/mine/lingqian.png" mode=""></image>
						<view>金币</view>	
					</view>
				</view>
			</u-popup>
				
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [
					{
					name: '任务列表'
				},
				{
					name: '已下架'
				}, {
					name: '已返佣'
				}, {
					name: '未通过',
				},{
					name: '待审核',
				}
				],
				show:false,
				current: 0,
				limit:10,
				page:1,
				lists:[],
				jdlists:[],
				
				price:1,
				password:'',
				pay_id:0,
				
				status: 'nomore',
				zys:0,
				
				type_show:false,
				pay_type:0,//支付方式 1 零钱 2 金币
				type_money:'元',
			};
		},
		onShow() {
			if (uni.getStorageSync('token') == '') {
				this.$.ti_shi('请先登录账号');
				var that = this;
				setTimeout(function() {
					that.$.open('/pages/login/login');
				}, 2000); 
			}
			this.page = 1;
			this.lists = [];
			this.getlist(0)
		},
		methods:{
			pay_type_show(id) {
				this.type_show = true;
				this.pay_id = id;
			},
			pay_type_show_2(e) {
				this.pay_type = e;
				this.pay_show();
				this.type_show = false;
				if(e == 1) {
					this.type_money = '元';
				}else{
					this.type_money = '币';
				}
			},
			go_back(){
				this.$.open_tab('/pages/mine/mine')
			},
			go_top(e){
				this.$.open('/pages/xuan_shang/zhi_ding?id='+ e + '&type=' + 1)
			},
			go_refresh(e){
				this.$.open('/pages/xuan_shang/shua_xin?id='+ e + '&type=' + 1)
			},
			change(index) {
				console.log(index);
				this.current = index;
				this.page = 1;
				this.lists = [];
				this.jdlists = [];
				if( this.current < 2) {
					this.getlist(index)
				}else{
					this.getjdlist(index);
				}
			},
			go_fb(){
				this.$.open('/pages/xuan_shang/fb')
			},
			info(id) {
				this.$.open('/pages/xuan_shang/xs_gl_xq?id='+id)
			},
			jdinfo(id) {
				this.$.open('/pages/xuan_shang/xs_gl_jd_xq?id='+id)
			},
			getlist(status){
				this.$.ajax(1, 'post', 'task/get_task_list', {
				uid:uni.getStorageSync('uid'),
				token:uni.getStorageSync('token'),
				status:status,
				limit:this.limit,
				page:this.page
			}, (res) => {
				if(res.code == 1){
					this.zys = res.pagecount
					if(res.data != ''){
						res.data.forEach((item,index)=>{
							this.lists.push(item);
						})
					}
					// this.lists = res
				}else{
					this.$.ti_shi(res.msg);
					if(res.code == 9) {
						var that = this;
						setTimeout(function() {
							that.$.open('/pages/login/login');
						}, 2000);
					} 
				}
			})
			},
			getjdlist(status){
				this.$.ajax(1, 'post', 'task/task_user_log', {
				uid:uni.getStorageSync('uid'),
				token:uni.getStorageSync('token'),
				status:status,
				limit:this.limit,
				page:this.page
			}, (res) => {
				if(res.code == 1){
					this.zys = res.pagecount
					if(res.data != ''){
						res.data.forEach((item,index)=>{
							this.jdlists.push(item);
						})
					}
					// this.jdlists = res
				}else{
					this.$.ti_shi(res.msg);
					if(res.code == 9) {
						var that = this;
						setTimeout(function() {
							that.$.open('/pages/login/login');
						}, 2000);
					} 
				}
			})
			},
			
			
			pay_show(){
				//获取该用户悬赏刷新价格
				this.$.ajax(1, 'post', 'task/get_refresh_price', {
					uid:uni.getStorageSync('uid'),
					token:uni.getStorageSync('token')
				}, (res) => {
					if(res.code == 1){
						this.price = res.price;
						this.show = true
					}else{
						this.$.ti_shi(res.msg);
						if(res.code == 9) {
							var that = this;
							setTimeout(function() {
								that.$.open('/pages/login/login');
							}, 2000); 
						}
					}
				})
			},
			onChange(val){
				// console.log(this.password)
				if(this.password.length<6){
					this.password += val;
					
				}
				if(this.password.length>=6){
					this.pay();
				}
			},
			onBackspace(e){
				if(this.password.length>0){
					this.password = this.password.substring(0,this.password.length-1);
				}
			},
			showPop(flag = true){
				this.password = '';
				this.show = flag;
			},
			pay(){
				if (this.pay_id == 0) {
					this.$.ti_shi('参数错误')
					return;
				}
				if(this.password == ''){
					this.$.ti_shi('请输入密码')
					return;
				}
				this.$.ajax(1, 'post', 'task/refresh', {
					uid:uni.getStorageSync('uid'),
					token:uni.getStorageSync('token'),
					password:this.password,
					id:this.pay_id,
					pay_type:this.pay_type
				}, (res) => {
					console.log(res)
					if(res.code == 1){
						this.$.ti_shi(res.msg)
						var that = this;
						setTimeout(function() {
							that.$.open('/pages/xuan_shang/xs_gl');
						}, 2000);
					}else{
						this.password = '';
						this.$.ti_shi(res.msg);
						if(res.code == 9) {
							var that = this;
							setTimeout(function() {
								that.$.open('/pages/login/login');
							}, 2000);
						}  
					}
				})
				this.show = false
			}	
		},
		onReachBottom() {
			if(this.page+1 <= this.zys){
				this.status = 'loading';
				this.page = ++this.page;
				if( this.current < 2) {
					this.getlist(this.current)
				}else{
					this.getjdlist(this.current);
				}
			}else{
				this.status = 'nomore';
				return;
			}
		}
	}
</script>

<style lang="scss">
	.dhl {
		// position: absolute;
		width: 100%;
		height: var(--status-bar-height);
		position: fixed;
		top: 0;
		z-index: 999;
	}
	.topbar {
		width: 100%;
		z-index: 999;
		height: 88rpx;
		position: fixed;
		top: var(--status-bar-height);
		font-size: 34rpx;
		color: #212730;
		font-weight: bold;
		// background-image: url(../../static/index/bg.png);
		// padding: 0 0 26rpx 0rpx;
		
		.top_jt {
			width: 18rpx;
			height: 32rpx;
			position: absolute;
			left: 40rpx;
			top: 28rpx;
		}
	}
	.r_btn {
		position: fixed;
		z-index: 999;
		top: calc(var(--status-bar-height) + 22rpx);
		right: 48rpx;
		color: #fff;
	
		image {
			width: 32.99rpx;
			margin-right: 6rpx;
			height: 34rpx;
		}
	}
	.content{
		width: 100%;
		padding-top: calc(var(--status-bar-height) + 88rpx);
		.list{
			padding: 0 24rpx;
			width: 100%;
			.list_box{
				width: 100%;
				background-color: #fff;
				margin-bottom: 12rpx;
				border-radius: 20rpx;
				box-shadow: 0rpx 6rpx 24rpx rgba(34, 34, 34, 0.05);
				padding: 36rpx 24rpx;
				.btn1{
					width: 102rpx;
					height: 48rpx;
					border: 2rpx solid #5EBCA3;
					color: #5EBCA3;
					font-size: 22rpx;
					margin-right: 12rpx;
					border-radius: 10rpx;
				}
				.btn2{
					width: 144rpx;
					height: 48rpx;
					border: 2rpx solid #6DADBE;
					color: #6DADBE;
					font-size: 22rpx;
					margin-right: 12rpx;
					border-radius: 10rpx;
				}
				.g_btn{
					width: 196rpx;
					height: 48rpx;
					border-radius: 10rpx;
					border: 2rpx solid #5EBCA3;
					margin-right: 24rpx;
					
				}
			}
		}
	}
	.money{
		font-size: 80rpx;
		color: $u-type-warning;
		position: relative;
		
		.close{
			position: absolute;
			top: 20rpx;
			right: 20rpx;
			line-height: 28rpx;
			font-size: 28rpx;
		}
	}
	.tips{
		color:$u-tips-color;
	}
	.zf_btn{
		color: #fff;
		background-color: #E23C63;
		border-radius: 20rpx;
		width: 100%;
		height: 88rpx;
	}
	.tc_pay{
		width: 100%;
		// padding: 20rpx;
		height: 100%;
		
		image{
			width: 60rpx;
			height: 60rpx;
			margin-right: 20rpx;
			
		}
	}
	.tg_bz {
		position: fixed;
		z-index: 999;
		font-size: 22rpx;
		line-height: 32rpx;
		top: calc(var(--status-bar-height) + 30rpx);
		right: 48rpx;
		color: #fff;
	
		image {
			width: 34rpx;
			height: 34rpx;
			margin-right: 6rpx;
		}
	
	}
</style>
